<template>
  <div class="list-main">
    <transition-group appear>
      <MyItem 
        v-for="todo in todos" 
        :todo="todo" 
        :key="todo.id"
        class="todoIn"
      >
      </MyItem>
    </transition-group>
      
  </div>
</template>

<script>
import MyItem from './MyItem.vue';
export default {
    name: "MyList",
    components: { MyItem },
    props: ['todos']
}
</script>

<style scoped>
    .list-main {
       width: 100%;
       height: 70%;   
       margin-top: 10px;
       overflow: auto;
    }

    .v-enter-active {
      animation: come .4s ease-in-out;
    }

    .v-leave-active {
      animation: come .4s ease-in-out reverse;
    }

    @keyframes come {
      from {
        transform: translateX(-100%);
      }
      to {
        transform: translateX(0);
      }
    }
</style>